<!-- 横向滚动组件 -->
<template>
    <div class="cardBox">
        <div class="titleBox">{{ title }}</div>
        <div class="positionBox">
            <div class="arrow left-arrow" @click="scrollLeft">&lt;</div>
            <div class="arrow right-arrow" @click="scrollRight">&gt;</div>
            <div class="product-list" ref="productList">
                <div v-for="(item, index) in products" :key="index" class="product-item">
                    <img style="width: 190px;height: 190px;" 
                    :src="item.file_path == 'UpLoadFiles\\shop.png'?`https://image.pollinations.ai/prompt/${item.product_name.split('、')[0]}`:store.imgfengMian + item.file_path" 
                    alt="" loading="lazy">
                    <div class="forTitleBox">{{ item.product_name }}</div>
                    <div class="textflexBox">
                        <div class="forTextBox">{{ item.enterprise_name }}</div>
                        <div class="buttonBox" @click="jxgxxqfun(item.product_Id)" >了解详情</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router';
import { useStore } from '@/store/store';
const store = useStore()
const router = useRouter();
// 定义接收的props
defineProps({
    products: {
        type: Array,
        default: []
    },
    title: {
        type: String,
        default: '默认标题'
    }
});
const jxgxxqfun = (id) => {
    router.push({
        path: '/ProductDetails',
        query: { id: id }
    });
}

const productList = ref(null)
let itemWidth = 0
let maxScroll = 0
// 初始化计算
const initSlider = () => {
    if (productList.value && productList.value.children[0]) {
        const firstItem = productList.value.children[0]
        itemWidth = firstItem.offsetWidth
        maxScroll = productList.value.scrollWidth - productList.value.clientWidth
    }
}
// 向左滚动
const scrollLeft = () => {
    if (!productList.value) return
    const currentScroll = productList.value.scrollLeft
    const newScroll = Math.max(currentScroll - itemWidth, 0) // 确保不小于0
    productList.value.scrollTo({
        left: newScroll,
        behavior: 'smooth'
    })
}
// 向右滚动
const scrollRight = () => {
    if (!productList.value) return
    const currentScroll = productList.value.scrollLeft
    const newScroll = Math.min(currentScroll + itemWidth, maxScroll) // 确保不超过最大值
    productList.value.scrollTo({
        left: newScroll,
        behavior: 'smooth'
    })
}

// 生命周期钩子
onMounted(() => {
    initSlider()
    window.addEventListener('resize', initSlider)
})
</script>

<style scoped lang="scss">
.cardBox {
    width: 100%;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
    padding: 20px;
    box-sizing: border-box;
}

.titleBox {
    font-weight: bold;
    font-size: 30px;
    color: #1F1F1F;
    margin-bottom: 5px;
}

.positionBox {
    position: relative;
}

.product-list {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
}

.product-list::-webkit-scrollbar {
    display: none;
}

.product-item {
    box-sizing: border-box;
    padding: 6px;
    flex-shrink: 0;
    padding-bottom: 0;
}

.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 6px 10px;
    cursor: pointer;
    user-select: none;
    z-index: 1;
    transition: opacity 0.3s;
}

.left-arrow {
    left: -20px;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
}

.right-arrow {
    right: -20px;
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
}

.forTitleBox {
    font-size: 16px;
    color: #333333;
}

.textflexBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.forTextBox {
    font-size: 12px;
    color: #333333;
    width: 65%;
}

.buttonBox {
    padding: 6px 8px;
    background: $button-color;
    border-radius: 4px;
    font-size: 12px;
    color: #fff;
    flex-shrink: 0;
    cursor: pointer;
}

/* 可选：滚动到边界时淡出箭头 */
.arrow.disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
</style>